<template>
  <div>
    <button @click="getStudent">获取学生信息</button>
  </div>
</template>

<script>

  import { rejects } from 'assert';
import axios from 'axios'
import { log } from 'console';
export default {
    name:"App",
    data(){
      return {}
    },
    methods:{
      /**
       * 当一个网站存在另一个网站的时候使用ajax请求数据的时候，虽然请求发送
       * ，网站也响应回执，但是由于后端没有配置cors的跨域授权，所以会被浏览器拦截
       * 那么我们可以配置一个代理服务器，由于代理服务器与服务器之间的交互是http协议
       * 并不通过ajax来发送http请求，所以自然不会存在跨域问题
       * 
       * 一般来说我们会使用nginx来充当这一角色
       * 但在vue中，我们一般使用vue-cli来建立代理服务器
       * 
       * 让我们前往vue.config.js 配置代理服务器
       */
      getStudent(){
        // axios.get('http://localhost:5000/student').then(
          // 使用代理服务器后，这里的端口使用，就是本项目的端口
          // 这样代理服务器会转发你这个请求到指定的服务器
          /*
          需要注意的是，代理服务器并不是什么请求都会转发
          当，当本项目的一些资源找不到的时候会去代理服务器请求
          例如，public目录是项目的根目录，如果目录的某个资源存在
          例如有一个1.txt
          那么你也写了/1.txt
          这个请求就会直接找public目录下的文件
          而不是通过代理服务器请求
          */
          axios.get('http://localhost:8080/student').then(
            response =>{
              console.log(response.data);
            },
            rejects=>{
              console.log(rejects.msg);
            }
        )
      }
    }
}
</script>

<style scoped>

</style>